<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"  trimDirectiveWhitespaces="true"%>
<%
    pageContext.setAttribute("ctx", request.getContextPath());
%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>${sysName}</title>
		<meta charset="UTF-8">
		<meta name="flexible" content="initial-dpr=2" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="shortcut icon" href="${ctx}/resources/image/logo.png" />
		<link rel="bookmark" href="${ctx}/resources/image/logo.png" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
		<style>
			html, body {height:100%;overflow:auto;margin: 0;}
	        html{overflow-y:scroll;}
	        .box {
	            width: 100%;
	            height: 100%;
	            background: url(${ctx}/resources/image/bg.jpg) no-repeat;
	            background-position: center center;
	            background-size: cover;
	            display:flex;
	            flex-direction: column;
	            justify-content: center;
	            align-items: center;
	        }
	
	        .top-title {
	            margin-top: -2rem;
	            width: 12rem;
	            height: 3rem;
	            display:flex;
	            justify-content: center;
	            align-items: center;
	        }
	
	        .logo {
	            width: 0.8rem;
	            margin-right: 0.2666rem;
	        }
	
	        .text-title {
	            color: white;
	            margin-right: 0.2666rem;
	            font-size: 0.5rem;
	        }
	
	        .login-view {
	            width: 8rem;
	            height: 6rem;
	            padding: 0.4rem;
	            background: url(${ctx}/resources/image/bg2.png) no-repeat;
	            background-position: center center;
	            background-size: cover;
	        }
	        .div-left{
	            display: inline-block;
	            width: 1.5rem;
	            font-size: 0.3rem;
	            text-align: center;
	        }        
	        ::-moz-placeholder {
	            color: white;
	        }
	
	        ::-webkit-input-placeholder {
	            color: white;
	        }
	
	        :-ms-input-placeholder {
	            color: white;
	        }
	
	        .login-view .login-input {
	            width: 6rem;
	            padding: 0.1333rem;
	            background: none;
	            border: 0.5px solid ghostwhite;
	            outline: none;
	            border-radius: 0.04rem;
	            color:white;
	            font-size: 0.3rem;
	        }
	
	        .login-view .login-input2 {
	            width: 3.5rem;
	            padding: 0.1333rem;
	            background: none;
	            border: 0.5px solid ghostwhite;
	            outline: none;
	            border-radius: 0.04rem;
	            color:white;
	            font-size: 0.3rem;
	        }
	
	        .login-item {
	            margin-top: 0.4rem;
	            color: white;
				display:flex;
				align-items: center;
	        }
	
	        .login-text {
	            margin-top: 0.2666rem;
	            text-align: center;
	            color: white;
	            font-size: 0.6rem;
	        }
	        .login-bottom{
	            margin-top: 0.5rem;
	            color: white;
	        }
	        .login-btn {
	            width: 6rem;
	            display: inline-block;
	            background: #0da5f1;
	            padding: 0.1rem;
	            text-align: center;
	            border-radius: 0.0666rem;
	            font-size: 0.3rem;
	        }
	        .yanzheng {
	            margin-left: 0.2666rem;
	            width: 0.4rem;
	            align-items: center;
				display:flex;
	        }
	        .verification-code {
	            display:flex;
	            align-items: center;
	        }
	    </style>
	</head>

	<body>
		<div class="box">
			<div class="top-title">
				<image class="logo" src="${ctx}/resources/image/logo.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" />
				<span class="text-title"> | </span>
				<span class="text-title"> 阳东智慧市场监控平11台后台管理 </span>
			</div>
			<div class="login-view layui-form">
				<div class="login-text">用户登录</div>
				<div class="login-item login-account">
					<div class="div-left"> 账&nbsp;&nbsp;&nbsp;&nbsp;号:</div> <input type="text" class="login-input" placeholder="请输入账号"
					 name="userCode" id="LAY-user-login-username" lay-verify="required">
				</div>
				<div class="login-item login-psd">
					<div class="div-left">密&nbsp;&nbsp;&nbsp;&nbsp;码:</div> <input type="password" class="login-input" placeholder="请输入密码"
					 name="password" id="LAY-user-login-password" lay-verify="required">
				</div>
				<div class="login-item verification-code">
					<div class="div-left">验证码:</div>
					<input type="text" class="login-input2" placeholder="请输入验证码" name="captcha" id="LAY-user-login-vercode" lay-verify="required">
					&nbsp;
					<image src="${ctx}/user/captcha" class="yanzheng" id="captchaUrl" mode="aspectFit|aspectFill|widthFix" width="120px" height="34px"/>
				</div>
				<div class="login-bottom">
					<div class="div-left">&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div class="login-btn" lay-submit lay-filter="LAY-user-login-submit" id="login_submit">登录</div>
				</div>

			</div>
		</div>

		<script src="${ctx}/resources/layuiadmin/layui/layui.js" charset=”utf-8″></script>
		<script>
			layui.config({
				base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'user', 'jquery'], function() {
				var $ = layui.$,
					setter = layui.setter,
					admin = layui.admin,
					form = layui.form,
					router = layui.router(),
					search = router.search;
				form.render();

				//提交
				form.on('submit(LAY-user-login-submit)', function(obj) {
					//请求登入接口
					$.post('${ctx}/user/login', obj.field, function(obj) {
						if (obj.success) {
							location.href = '${ctx}/' + obj.data;
						} else {
							$("#captchaUrl").attr("src", '${ctx}/user/captcha?' + new Date().getTime());
							layer.msg(obj.errors.message, {
								icon: 5
							});
						}
					}.bind(this), 'json');
				});

				$("#captchaUrl").click(function() {
					$(this).attr("src", '${ctx}/user/captcha?' + new Date().getTime());
				});

				$(document).keydown(function(e) {
					if (e.keyCode === 13) {
						$("#login_submit").trigger("click");
					}
				});
			});
		</script>
	</body>

</html>
